<template>
    <div class="main-box">
        <el-button type="primary" @click="exportPdf">导出PDF</el-button>
        <div id="main-box">
            <div class="title">牛海绵状脑病(BSE) 风险评估报告</div>
            <div class="pdf-box">
                <div class="sub-title">1、风险评估材料与方法</div>
                <div class="content">
                    <div class="th-title">1.1、风险评估原理：</div>
                    <span class="zw">占位</span>传播媒介和传染源的活动数量是分析我国疯牛病(BSE)病毒输入风险的关键因素，本系统主要基于①疯牛病(BSE)传播媒介（疯牛病(BSE)、）的活动数量和②全球疯牛病(BSE)发病数量（人）进行疯牛病(BSE)输入风险的模型计算分析。<br/>
                    <span class="zw">占位</span>通过地区的温度和湿度等变化因素对地区的疯牛病(BSE)和的活动数量进行模型测算。通过统计分析不同时期内全球疯牛病(BSE)发病数量对病毒传染源进行模型测算。进一步根据风险评估模型综合分析我国地区性的潜在疯牛病(BSE)输入风险。<br/>
                    <span class="zw">占位</span>疯牛病(BSE)的流行除了受到疯牛病(BSE)和（传播媒介）的影响，还受到生态、地理、宿主活动等各种因素的影响。本系统版本主要基于传播媒介数量和传染源数量进行模型分析，其余因素以模型参数和权重参数的形式纳入分析。<br/>
                    <span class="zw">占位</span>本系统主要针对有途径的我国西部部分地区。根据文献报道和本研究团队的实验分析，我国西部部分地区具有潜在的疯牛病(BSE)输入风险，并且与-疯牛病(BSE)活动数量呈正相关。
                </div>
                <div class="content">
                    <div class="th-title">1.2、数据来源：</div>
                    <span class="zw">占位</span>《全球传染病疫情概要》<br/>
                    <span class="zw">占位</span>《中央气象台》、《中国天气网》<br/>
                    <span class="zw">占位</span>《国家地理信息公共服务平台》<br/>
                </div>
                <div class="content">
                    <div class="th-title">1.3、模型算法：</div>
                    <span class="zw">占位</span>根据文献El Moustaid, F., and Johnson, L.R. (2019). Modeling 病例数量 Effects on Population Density of the Dengue Mosquito. Insects 10. ARTN 393 10.3390/insects10110393. 改进的传染病学中疯牛病(BSE)和数量计算数学模型<br/>
                </div>
                <div class="sub-title">2、风险评估数据</div>
                <div class="content">
                    <div class="th-title">2.1、</div>
<!--                    <div id="charts1" style="height: 500px;width: 100%;margin: 20px 0;"></div>-->
<!--                    <div id="charts2" style="height: 500px;width: 100%;margin: 20px 0;"></div>-->
<!--                    <div id="charts3" style="height: 500px;width: 100%;margin: 20px 0;"></div>-->
                </div>
                <div class="content">
                    <div class="th-title">2.2、风险计算</div>
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="项目"
                            align="center">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="计算数值"
                            align="center"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            align="center"
                            width="180"
                            label="计分">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="sub-title">3、风险评估说明</div>
                <div class="content">
                    <span class="zw">占位</span>根据模型测算，2024年7月我国西部地区的疯牛病(BSE)数量约为XXX，数量约为XXX。同时期全球可统计的疯牛病(BSE)发病病例数为XXX；经本模型计算，该月的疯牛病(BSE)输入风险分数为XXX。<br/>
                    <span class="zw">占位</span>与同年其他月份相比，7月的疯牛病(BSE)数量低于X、Y、Z月，高于A、B、C月，数量排在第XXX位；数量低于X、Y、Z月，高于A、B、C月，数量排在第XXX位；全球疯牛病(BSE)发病病例数低于X、Y、Z月，高于A、B、C月，数量排在第XXX位；经综合计算，疯牛病(BSE)输入风险分数低于低于X、Y、Z月，高于A、B、C月，排在第XXX位；说明7月是疯牛病(BSE)输入风险较高/中/低的月份；<br/>
                    <span class="zw">占位</span>与往年同月份相比，2024年7月的疯牛病(BSE)数量低于X、Y、Z年，高于A、B、C年，数量排在第XXX位；数量低于X、Y、Z年，高于A、B、C年，数量排在第XXX位；全球疯牛病(BSE)发病病例数低于X、Y、Z年，高于A、B、C年，数量排在第XXX位；经综合计算，2024年疯牛病(BSE)输入风险分数低于低于X、Y、Z年，高于A、B、C年，排在第XXX位；说明2024年7月是疯牛病(BSE)输入风险较高/中/低的月份；<br/>
                </div>
                <div class="content" style="margin-top: 20px;">
                    <span class="zw">占位</span>根据模型测算，2024年我国西部地区的疯牛病(BSE)数量约为XXX，数量约为XXX。同时期全球可统计的疯牛病(BSE)发病病例数为XXX；经本模型计算，2024年的疯牛病(BSE)输入风险分数为XXX（每月数值相加）。<br/>
                    <span class="zw">占位</span>2024年一月的疯牛病(BSE)数量约为XXX，数量约为XXX，疯牛病(BSE)发病病例数量为XXX，疯牛病(BSE)输入风险分数为XXX；二月。。。；三月。。。；（可以按月列表）。其中7月、8月、9月的输入风险最高，1月、2月、3月的输入风险最低；输入风险最高的季节集中在夏季，输入风险最低的季节集中在冬季；<br/>
                    <span class="zw">占位</span>与往年相比，2024年的疯牛病(BSE)输入风险分数低于X、Y、Z年，高于A、B、C年，排在第XXX位；其中疯牛病(BSE)数量低于X、Y、Z年，高于A、B、C年，排在第XXX位；数量低于X、Y、Z年，高于A、B、C年，排在第XXX位；全球疯牛病(BSE)发病病例数低于X、Y、Z年，高于A、B、C年，排在第XXX位；<br/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {htmlToPdf} from "@/utils/print";

export default {
    name: 'PDFEXPORT',
    components: {},
    data() {
        return {
            tableData: [{
                date: '病例数量',
                name: '100',
                address: '6'
            }, {
                date: '数量',
                name: '60',
                address: '6'
            }, {
                date: '疯牛病(BSE)发病数',
                name: '25',
                address: '6'
            }, {
                date: '疯牛病(BSE)输入风险计分',
                name: '',
                address: '216'
            }]

        }
    },
    activated() {
        this.initCharts1();
        this.initCharts2();
        this.initCharts3();

    },
    methods: {
        exportPdf(){
            htmlToPdf("疯牛病(BSE) 风险评估报告","main-box", "疯牛病(BSE)")
        },
        initCharts1(){
            let myChart = echarts.getInstanceByDom(document.getElementById("charts1"))
            if (myChart == null) {
                myChart = echarts.init(document.getElementById('charts1'))
            }
            // 绘制图表
            myChart.setOption({
                color: ['#5470C6', '#91CC75', '#409EFF'],
                title: {
                    text: '病例数量模型', // 主标题文本
                    left: 'left', // 标题水平位置
                    textStyle: { // 主标题样式
                        color: '#000000'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '15%',    // 距离左边的距离可以是像素值或者百分比
                    right: '10%',   // 距离右边的距离
                    top: '15%',     // 距离顶部的距离
                    bottom: '10%'   // 距离底部的距离
                },
                toolbox: {

                },
                legend: {
                    data: ['温度', '降水量','病例数量'],
                    left: "right"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月','10月','11月','12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 50,
                        interval: 5,
                        position: 'left',
                        offset: 50, // y轴位置的偏移量
                        axisLine: {
                            lineStyle: {
                                color: '#5470C6'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ℃'
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量',
                        min: 0,
                        max: 300,
                        interval: 30,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#91CC75'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '病例数量',
                        min: 0,
                        max: 600,
                        interval: 60,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: '#409EFF'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 只'
                        }
                    }
                ],
                series: [
                    {
                        name: '温度',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ℃';
                            }
                        },
                        yAxisIndex: 0,
                        data: [
                            22.0, 24.9, 27.0, 23.2, 25.6, 26.7, 25.6, 22.2, 32.6, 20.0, 26.4, 23.3
                        ]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: [
                            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        ]
                    },
                    {
                        name: '病例数量',
                        type: 'line',
                        yAxisIndex: 2,
                        tooltip: {

                        },
                        data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
                    },

                ]
            })
        },
        initCharts2(){
            let myChart = echarts.getInstanceByDom(document.getElementById("charts2"))
            if (myChart == null) {
                myChart = echarts.init(document.getElementById('charts2'))
            }
            // 绘制图表
            myChart.setOption({
                color: ['#5470C6', '#91CC75', '#409EFF'],
                title: {
                    text: '数量模型', // 主标题文本
                    left: 'left', // 标题水平位置
                    textStyle: { // 主标题样式
                        color: '#000000'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '15%',    // 距离左边的距离可以是像素值或者百分比
                    right: '10%',   // 距离右边的距离
                    top: '15%',     // 距离顶部的距离
                    bottom: '10%'   // 距离底部的距离
                },
                toolbox: {

                },
                legend: {
                    data: ['温度', '降水量','数量'],
                    left: "right"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月','10月','11月','12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 50,
                        interval: 5,
                        position: 'left',
                        offset: 50, // y轴位置的偏移量
                        axisLine: {
                            lineStyle: {
                                color: '#5470C6'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ℃'
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量',
                        min: 0,
                        max: 300,
                        interval: 30,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#91CC75'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '数量',
                        min: 0,
                        max: 600,
                        interval: 60,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: '#409EFF'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 只'
                        }
                    }
                ],
                series: [
                    {
                        name: '温度',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ℃';
                            }
                        },
                        yAxisIndex: 0,
                        data: [
                            22.0, 24.9, 27.0, 23.2, 25.6, 26.7, 25.6, 22.2, 32.6, 20.0, 26.4, 23.3
                        ]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: [
                            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        ]
                    },
                    {
                        name: '病例数量',
                        type: 'line',
                        yAxisIndex: 2,
                        tooltip: {

                        },
                        data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
                    },

                ]
            })
        },
        initCharts3(){
            let myChart = echarts.getInstanceByDom(document.getElementById("charts3"))
            if (myChart == null) {
                myChart = echarts.init(document.getElementById('charts3'))
            }
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '全球疯牛病(BSE)发病数', // 主标题文本
                    left: 'left', // 标题水平位置
                    textStyle: { // 主标题样式
                        color: '#000000'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '10%',    // 距离左边的距离可以是像素值或者百分比
                    right: '10%',   // 距离右边的距离
                    top: '15%',     // 距离顶部的距离
                    bottom: '10%'   // 距离底部的距离
                },
                toolbox: {

                },
                legend: {
                    left: "right"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月','10月','11月','12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 300,
                        interval: 50,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#5470C6'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '病例数量',
                        type: 'line',
                        tooltip: {

                        },
                        data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
                    },

                ]
            })
        }

    }
}
</script>
<style lang="scss" scoped>
    .main-box{
        color: #101111;
    }
    .pdf-box{
        width: 100%;
        margin: 0 auto;
    }
    .title{
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 30px;
    }
    .sub-title{
        font-weight: bold;
        font-size: 25px;
        line-height: 60px;
    }
    .th-title{
        font-weight: bold;
        font-size: 22px;
    }
    .zw{
        visibility: hidden;
    }
    .content{
        font-size: 18px;
        line-height: 36px;
    }
</style>
